<template>
  <van-nav-bar
    title="打卡"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <van-tabs v-model:active="active">
    <van-tab title="当前打卡">
      <van-cell-group inset>
        <van-cell
          v-show="s1"
          is-link
          @click="showPopup1"
          icon="clock-o"
          title="每日健康打卡"
          value="前往打卡"
          :label="time1"
        />
        <van-popup
          round
          closeable
          v-model:show="show1"
          position="bottom"
          :style="{ height: '80%' }"
        >
          <van-form @submit="onSubmit">
            <van-cell-group>
              <van-nav-bar title="打卡内容" />
              <van-cell title="任务ID" :value="id1" />
              <van-cell title="打卡标题" :value="title1" />
              <van-cell title="打卡内容" :value="value1" />
              <van-field
                v-model="temperature1"
                label="体温"
                name="体温"
                placeholder="请输入体温"
                input-align="right"
                required
                type="number"
                :rules="[{ pattern, message: '请输入合理的体温（35-40）' }]"
              />
              <van-cell title="图片展示">
                <van-image width="100" height="100" :src="srcc1" />
              </van-cell>
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                确认打卡
              </van-button>
            </div>
          </van-form>
        </van-popup>
      </van-cell-group>
    </van-tab>
    <van-tab title="超时未打卡">
      <van-cell-group inset>
        <van-cell
          icon="close"
          v-show="s2"
          is-link
          @click="showPopup2"
          :title="title2"
          value="前往打卡"
          :label="time2"
        />
        <van-popup
          round
          closeable
          v-model:show="show2"
          position="bottom"
          :style="{ height: '80%' }"
        >
          <van-form @submit="onSubmit1">
            <van-cell-group>
              <van-nav-bar title="补交打卡" />
              <van-cell title="任务ID" :value="id2" />
              <van-cell title="打卡标题" :value="title2" />
              <van-cell title="打卡内容" :value="value2" />
              <van-field
                v-model="temperature2"
                label="体温"
                name="体温"
                placeholder="请输入体温"
                input-align="right"
                type="number"
                :rules="[{ pattern, message: '请输入合理的体温（35-40）' }]"
              />
              <van-cell title="图片展示">
                <van-image width="100" height="100" :src="srcc2" />
              </van-cell>
            </van-cell-group>
            <div style="margin: 16px">
              <van-button round block type="primary" native-type="submit">
                确认打卡
              </van-button>
            </div>
          </van-form>
        </van-popup>
      </van-cell-group>
    </van-tab>
    <van-tab title="历史打卡活动">
      <van-cell-group inset v-for="(item, index) in list" :key="index">
        <van-cell
          :title="item.dktitle"
          :value="item.dkdate"
          :label="item.dkrwid"
          is-link
          @click="showPopup(index)"
        />
        <van-popup
          v-model:show="show[index].ft"
          position="bottom"
          :style="{ height: '80%' }"
          round
          closeable
        >
          <van-cell-group>
            <van-nav-bar title="打卡内容" />
            <van-cell title="任务ID" :value="item.dkrwid" />
            <van-cell title="打卡标题" :value="item.dktitle" />
            <van-cell title="打卡内容" :value="item.dknr" />
            <van-cell title="签到温度" :value="item.dkwendu" />
            <van-cell title="图片展示">
              <van-image width="100" height="100" :src="srcc1" />
            </van-cell>
            <van-cell title="教师评论" :value="item.dkpingjia" />
          </van-cell-group>
        </van-popup>
      </van-cell-group>
    </van-tab>
  </van-tabs>
</template>

<script lang="ts">
import { ref } from "vue";
import axios from "axios";
import {
  NavBar,
  Tab,
  Tabs,
  Popup,
  Cell,
  CellGroup,
  Uploader,
  Image as VanImage,
  Toast,
  Dialog,
  Button,
  Form,
  Field,
} from "vant";
export default {
  watch: {
    $route() {
      window.location.reload();
    },
  },
  components: {
    [Uploader.name]: Uploader,
    [Popup.name]: Popup,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [NavBar.name]: NavBar,
    [VanImage.name]: VanImage,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
    [Button.name]: Button,
    [Form.name]: Form,
    [Field.name]: Field,
  },
  data() {
    return {
      show: [
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
        {
          ft: false,
        },
      ],
    };
  },
  methods: {
    showPopup(index) {
      this.show[index].ft = !this.show[index].ft;
    },
  },
  setup() {
    const onClickLeft = () => history.back();
    const active = ref(0);
    const posts = ref([]);
    axios
      .get("http://127.0.0.1:8088/daka")
      .then(
        (response) => (
          (posts.value = response.data), console.log(response.data[0])
        )
      )
      .catch(function (error) {
        // 请求失败处理
        console.log(error);
      });
    const list = posts;

    //当前打卡
    const pattern = /((^3[5-9])(\.\d+)?|^(40)(\.0+)?)$/; //体温校验规则
    const show1 = ref(false);
    const s1 = ref(true);
    const showPopup1 = () => {
      show1.value = true;
    };
    const value1 = ref("完成健康打卡");
    const temperature1 = ref("");
    const id1 = ref("3");
    const title1 = ref("健康打卡");
    const srcc1 = ref("https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg");
    const tComment1 = ref("收到");
    const time1 = ref("2022-11-23");
    const onSubmit = (values) => {
      Toast.success("打卡成功！");
      show1.value = false;
      s1.value = false;
      list.value.unshift({
        dkrwid: id1.value,
        dktitle: title1.value,
        dknr: value1.value,
        dkwendu: temperature1.value,
        dkpingjia: tComment1.value,
        srcc: srcc1.value,
        dkdate: time1.value,
      });
    };

    //补交打卡
    const show2 = ref(false);
    const s2 = ref(true);
    const showPopup2 = () => {
      show2.value = true;
    };
    const value2 = ref("补交健康打卡");
    const temperature2 = ref("");
    const id2 = ref("222");
    const title2 = ref("补交打卡");
    const srcc2 = ref("https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg");
    const tComment2 = ref("下次一定要准时打卡！");
    const time2 = ref("2022-11-28");
    const onSubmit1 = (values) => {
      Toast.success("打卡成功！");
      show2.value = false;
      s2.value = false;
      list.value.unshift({
        dkrwid: id2.value,
        dktitle: title2.value,
        dknr: value2.value,
        dkwendu: temperature2.value,
        dkpingjia: tComment2.value,
        srcc: srcc2.value,
        dkdate: time2.value,
      });
    };
    return {
      pattern,
      id2,
      value2,
      temperature2,
      title2,
      tComment2,
      time2,
      srcc2,
      onSubmit1,
      showPopup2,
      show2,
      s2,
      show1,
      showPopup1,
      s1,
      onClickLeft,
      active,
      onSubmit,
      temperature1,
      list,
      Toast,
      Dialog,
      value1,
      id1,
      title1,
      srcc1,
      tComment1,
      time1,
    };
  },
};
</script>

<style>
.van-tabs__line {
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  z-index: 1;
  width: var(--van-tabs-bottom-bar-width);
  height: var(--van-tabs-bottom-bar-height);
  background: #00bfff;
  border-radius: var(--van-tabs-bottom-bar-height);
}
:root {
  --van-nav-bar-icon-color: white;
  --van-nav-bar-background-color: #00bfff;
  --van-nav-bar-text-color: white;
  --van-nav-bar-title-text-color: white;
}
</style>
